Text

For consistent typography throughout the application, we created text helper classes for headings and body text.

Base

Preview

Code

<div class="slds-text-body--regular">The quick brown fox jumps over the lazy dog.</div>

This helper sets regular body copy. You usually don’t need this class since most components will inherit this globally from the body element. However, it exists if you still need to specifically set it.

Body Smalldev ready

Preview

Code

<div class="slds-text-body--small">The quick brown fox jumps over the lazy dog.</div>

This helper sets smaller, subtler body copy. It is typically used as supportive text.

Heading Largedev ready

Preview

Code

<div class="slds-text-heading--large">The quick brown fox jumps over the lazy dog.</div>

These helpers give large headings. On smaller form factors, these appear the same size as medium headings, but bolder. On larger form factors, they are lighter and bigger.

These are rarely used in the app, and are reserved for extremely large text to showcase data (such as totals or stats).

Heading Mediumdev ready

Preview

Code

<div class="slds-text-heading--medium">The quick brown fox jumps over the lazy dog.</div>

This is typically the largest heading on a page and usually designates a page title.

Heading Smalldev ready

Preview

Code

<div class="slds-text-heading--small">The quick brown fox jumps over the lazy dog.</div>

Small Headings are used for smaller content areas such as list sections or card titles.

Heading Labeldev ready

Preview

Code

<div class="slds-text-heading--label">The quick brown fox jumps over the lazy dog.</div>

Label headers are used for small mini headers that don’t need to bring visual attention to themselves. They usually label small content areas like table columns and list sections.

Alignmentdev ready

Preview

Code

<div class="slds-text-align--left">The quick brown fox jumps over the lazy dog.</div>
<div class="slds-text-align--center">The quick brown fox jumps over the lazy dog.</div>
<div class="slds-text-align--right">The quick brown fox jumps over the lazy dog.</div>

These helpers align text to the left, right, or center. Note that this is not used for layout and is only for aligning text horizontally.

Longformdev ready

Preview

Code

<div class="slds-text-longform">
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <h3 class="slds-text-heading--small">Something</h3>
  <ul>
    <li>The quick brown fox jumps over the lazy dog.</li>
    <li>The quick brown fox jumps over the lazy dog.</li>
  </ul>
</div>

Almost all areas of our application have headings, paragraphs and lists reset with no additional spacing or lists reset without bullets. So we opt into spacing and bullets instead. Wrap areas of longform content to get these.

Section Titleprototype

Preview

Code

<div class="slds-section__title">Section Title</div>

Section Titles are interactive titles that open and close sections, typically on a form.

Section Title Dividersprototype

Preview

Code

<h3 class="slds-section-title--divider">Section Title</h3>

Section Title Dividers are titles typically for forms, and act as a visual separator for sections.

Faux Linksdev ready

Preview

Code

<span class="slds-type-focus">Span with faux link interactions</span>

Faux links are used on areas that can't be wrapped in an a element, but need to appear to be a link with an underline on hover. An example is in the page header for Object home. The H1 and button that sit next to each other have the .slds-type-focus class on their parent element.

Component Overview

In our framework, all headings (h1h6) are reset to the base (body text) size, with margins and padding reset to zero. When building an enterprise application, the heading level may vary depending on the context of the component or page. Using the correct heading level is important for accessibility.

The text helper classes help maintain visual hierarchy separately from the structural markup hierarchy.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-text-body--regular
Applied to:

Outcome:

Creates the 14px regular body copy

Required:

No, optional element or modifier

Comments:

This is the base body font size and is rarely needed

.slds-text-body--small
Applied to:

Outcome:

Creates a more pale-colored 12px copy

Required:

No, optional element or modifier

Comments:

Typically used as supportive text

.slds-text-heading--large
Applied to:

Any heading

Outcome:

Very large 32px heading

Required:

No, optional element or modifier

Comments:

These are rarely used in the app and are reserved for extremely large text to showcase data (such as totals or stats).

.slds-text-heading--medium
Applied to:

Any heading

Outcome:

Large 24px heading

Required:

No, optional element or modifier

Comments:

Typically the largest heading on a page

.slds-text-heading--small
Applied to:

Any heading

Outcome:

Smaller 18px heading

Required:

No, optional element or modifier

Comments:

Used for smaller content areas such as list sections or card titles

.slds-text-heading--label
Applied to:

Any heading

Outcome:

All caps 12px heading

Required:

No, optional element or modifier

Comments:

Usually labels small content areas like table columns and list sections

.slds-text-longform
Applied to:

div

Outcome:

Adds default spacing and list styling within a wrapper

Required:

No, optional element or modifier

Comments:

Our application framework removes default text styling. This adds in margins to large areas

.slds-text-align--left
Applied to:

Any text

Outcome:

Aligns text left

Required:

No, optional element or modifier

Comments:

--

.slds-text-align--center
Applied to:

Any text

Outcome:

Aligns text center

Required:

No, optional element or modifier

Comments:

--

.slds-text-align--right
Applied to:

Any text

Outcome:

Aligns text right

Required:

No, optional element or modifier

Comments:

--

.slds-section
Applied to:

Outcome:

Container for a collapsable sub section through interaction with the section title

Required:

Required

Comments:

These are typically on a form, if content exists to be expanded, applying the .slds-is-open will expand .slds-section__content

.slds-section__title
Applied to:

Outcome:

Title of a section, can contain an interactive button icon to expand/collapse sub section(s)

Required:

Required

Comments:

--

.slds-section__title-action
Applied to:

Outcome:

Interactive titles with icons that open and close sections

Required:

Required

Comments:

--

.slds-section__content
Applied to:

Outcome:

Content of a section that can be expanded/collapse through interaction with the .slds-section__title-action

Required:

Required

Comments:

--

.slds-section-title
Deprecated
Applied to:

Outcome:

Interactive titles with icons that open and close sections

Required:

No, optional element or modifier

Comments:

These are typically on a form

.slds-section-title--divider
Deprecated
Applied to:

Outcome:

Titles that also act as a divider with a grey background

Required:

No, optional element or modifier

Comments:

These are typically on a form

.slds-type-focus
Applied to:

container

Outcome:

Creates a faux link with interactions

Required:

No, optional element or modifier

Comments:

This is used when an actual anchor element can not be used. For example — when a heading and button are next to each other and both need the text underline